<template>
  <view class="selectFamilyMember allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="选择生日/纪念日关联人" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="selectFamilyMember_content mt-25">
      <view class="selectFamilyMember_content_all allColumnCenter">
        <view class="selectFamilyMember_content_all_search allRowCenter mt-28">
          <image src="/static/shiqin-images/search.png" class="selectFamilyMember_content_all_search_image"></image>
          <text class="selectFamilyMember_content_all_search_text">搜索</text>
        </view>
        <view class="selectFamilyMember_content_all_tips mt-28">
          <text class="selectFamilyMember_content_all_tips_title">家庭成员</text>
          <view class="selectFamilyMember_content_all_tips_bottom mt-14 row items-center">
            <text class="selectFamilyMember_content_all_tips_bottom_text">找不到家庭成员可</text>
            <text class="selectFamilyMember_content_all_tips_bottom_texts" @click.stop="addFamilyMembers">点击添加
            </text>
            <u-icon name="play-right-fill" size="20" color="#63A3F8"></u-icon>
          </view>
        </view>
        <scroll-view :scroll-y="true" class="selectFamilyMember_content_all_scroll mt-20 mb-20" @scrolltolower="selectFamilyMemberScrolltolower">
          <view class="selectFamilyMember_content_all_list row items-center justify-between"
                v-for="(item,index) in familyList" :key="index" @click="familyIndex = index">
            <view class="selectFamilyMember_content_all_list_left row items-center">
              <image-avater :width="78" :height="78" :src="item.avatar"></image-avater>
              <view class="selectFamilyMember_content_all_list_left_name row items-center">
                <text class="selectFamilyMember_content_all_list_left_name_text ml-12">{{ item.username }}</text>
                <view class="selectFamilyMember_content_all_list_left_name_label allRowCenter ml-17" v-if="item.remark">
                  <text class="selectFamilyMember_content_all_list_left_name_label_text">{{ item.remark }}</text>
                </view>
              </view>
            </view>
            <view class="selectFamilyMember_content_all_list_right" v-if="familyIndex == index">
            </view>
            <view class="selectFamilyMember_content_all_list_rightSelect" v-else></view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="selectFamilyMember_bottomBtn allRowCenter mt-101" @click.stop="back">
      <text class="selectFamilyMember_bottomBtn_text">确定</text>
    </view>

    <!-- 家庭成员弹窗 -->
    <first_popup ref="familyMemberPopUp">
      <template>
        <view class="familyMemberPopUp allColumnCenter">
          <scroll-view :scroll-left="familyMembersProfileListScroll.scrollLeft" :scroll-x="true"
                       class="familyMemberPopUp_scrollView mt-32"
                       scroll-with-animation>
            <view :id="selectProfileIndex == index ? 'familyMemberPopUp_scrollView_list':''"
                  class="familyMemberPopUp_scrollView_list" v-for="(item,index) in familyMembersProfileList" :style="{
              padding:index == 0 ? '0 12rpx 0 0':index == familyMembersProfileList.length?'0 0 0 12rpx':'0 12rpx'
            }" :key="index" @click="changeTab(index)">
              <image-avater id="imageAvater" :width="selectProfileIndex == index?111 : 78"
                            :height="selectProfileIndex == index? 111 : 78" :src="item.img"
                            :is-order="selectProfileIndex == index"
                            :border-width="4" border-color="#FF4206"></image-avater>
            </view>
          </scroll-view>
          <view class="familyMemberPopUp_editInfo row items-center justify-between mt-64">
            <view class="familyMemberPopUp_editInfo_left allRowCenter">
              <input type="text" :value="familyPopupFrom.nameBox" placeholder="尊姓"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="suernameInput"
                     @blur="surnameBlur">
            </view>
            <view class="familyMemberPopUp_editInfo_right allRowCenter">
              <input type="text" :value="familyPopupFrom.appellation" placeholder="大名"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="nameInput" @blur="nameBlur">
            </view>
          </view>
        </view>
      </template>
    </first_popup>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";
import First_popup from "../../components/shiqinComponents/shiqin_globalPopUps/first_popup.vue";
import {addFamilyMember, getConfigFamilyImage, getFamilyMemberList} from "../../api/shiqinAPI";

export default {
  components: {First_popup, ImageAvater, HeaderTitle},
  data() {
    return {
      // 头部高度
      headerHeight: 0,
      familyList: [],
      familyIndex: 0,
      // 家庭成员头像列表
      familyMembersProfileList: [],
      // 选中的家庭成员头像的下标
      selectProfileIndex: 2,
      familyPopupFrom: {
        nameBox: '',
        appellation: ''
      },
      familyMembersProfileListScroll: {
        scrollLeft: 0,
        allWidth: 0,
        width: 0,
        selectWidth: 0
      },
      // 获取家庭成员参数
      getFamilyMemberListParams: {
        page: 1,
        pagesize: 10,
        family_id: '',
        type: 2,
        total: 0
      },
    };
  },
  computed: {
    family_id() {
      return this.$store.state.shiqinStore.selectedId
    }
  },
  watch: {
    familyMembersProfileListScroll: {
      deep: true,
      handler(newValue, oldValue) {
        this.familyMembersProfileListScroll.scrollLeft = newValue.allWidth - newValue.width / 2 + newValue.selectWidth / 2
      }
    }
  },
  onLoad() {
    this.getFamilyMembers()
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    suernameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2))
        } else {
          this.$set(this.familyPopupFrom, 'nameBox', '')
        }
      }
    },
    surnameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2))
        } else {
          this.$set(this.familyPopupFrom, 'nameBox', '')
        }
      }
    },
    nameInput(e) {
      if (e.target.value.length > 1) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4))
        } else {
          this.$set(this.familyPopupFrom, 'appellation', '')
        }
      }
    },
    nameBlur(e) {
      if (e.target.value.length > 0) {
        let arr
        arr = e.target.value.match(/[\u4e00-\u9fa5]/g)
        if (!!arr) {
          this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4))
        } else {
          this.$set(this.familyPopupFrom, 'appellation', '')
        }
      }
    },
    getPageHeight(number) {
      this.headerHeight = number
    },
    back() {
      uni.$emit('selectMember',this.familyList[this.familyIndex])
      uni.navigateBack()
    },
    // 添加家庭成员
    async addFamilyMembers() {
      let {data, status, msg} = await getConfigFamilyImage()
      if (status != '200') {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
        return
      }
      this.familyMembersProfileList = data.list
      this.$refs.familyMemberPopUp.openPopup({
        title: '添加家庭成员',
        maskClick: false,
        confirm: () => {
          if (this.familyPopupFrom.nameBox == '') {
            uni.showToast({
              title: '姓氏尚未填写',
              icon: 'none'
            })
            return
          }
          if (this.familyPopupFrom.appellation == '') {
            uni.showToast({
              title: '名称尚未填写',
              icon: 'none'
            })
            return
          }
          addFamilyMember({
            family_id: this.$store.state.shiqinStore.selectedId,
            surname: this.familyPopupFrom.nameBox,
            daimyo: this.familyPopupFrom.appellation,
            img: this.familyMembersProfileList[this.selectProfileIndex].img
          }).then(res => {
            if (res.status == '200') {
              uni.showToast({
                title: '添加成功',
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none'
              })
            }
            this.$refs.familyMemberPopUp.closePopup()
            this.familyPopupFrom.appellation = ''
            this.familyPopupFrom.nameBox = ''
          })
        }
      })
    },
    changeTab(index) {
      this.selectProfileIndex = index
      setTimeout(() => {
        this.moveTo(index)
      }, 10)
    },
    moveTo(index) {
      const query = uni.createSelectorQuery().in(this)
      query.select('.familyMemberPopUp_scrollView').boundingClientRect(data => {
        this.familyMembersProfileListScroll.width = data.width
      }).exec()
      query.select('#familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
        this.familyMembersProfileListScroll.selectWidth = rect.width
      }).exec()
      query.selectAll('.familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
        if (rect.length > 0) {
          this.familyMembersProfileListScroll.allWidth = 0
          rect.forEach((item, i) => {
            if (i < index) {
              this.familyMembersProfileListScroll.allWidth += Number(item.width)
            }
          })
        }
      }).exec()
    },
    // 获取成员列表
    async getFamilyMembers() {
      this.getFamilyMemberListParams.family_id = this.family_id
      let {data, status, msg} = await getFamilyMemberList(this.getFamilyMemberListParams)
      if (status != '200') {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
        return
      }
      data.list.data.forEach(item => {
        this.familyList.push(item)
      })
      this.getFamilyMemberListParams.total = data.list.total
    },
    selectFamilyMemberScrolltolower(){
      if(this.getFamilyMemberListParams.page * this.getFamilyMemberListParams.pagesize <= this.getFamilyMemberListParams.total){
        this.getFamilyMemberListParams.page++
        this.getFamilyMembers()
      }
    }
  },
}
</script>

<style lang="scss">
.selectFamilyMember {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .selectFamilyMember_content {
    width: 702rpx;
    background: #FFFFFF;
    border-radius: 15rpx 15rpx 15rpx 15rpx;
    overflow: hidden;

    .selectFamilyMember_content_all {
      width: 662rpx;
      margin: 0 20rpx;

      .selectFamilyMember_content_all_search {
        width: 662rpx;
        height: 80rpx;
        background: #E5E5E5;
        border-radius: 50rpx 50rpx 50rpx 50rpx;

        .selectFamilyMember_content_all_search_image {
          width: 25rpx;
          height: 25rpx;
        }

        .selectFamilyMember_content_all_search_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #4B4B4B;
        }
      }

      .selectFamilyMember_content_all_tips {
        width: 662rpx;

        .selectFamilyMember_content_all_tips_title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #292929;
        }

        .selectFamilyMember_content_all_tips_bottom {
          .selectFamilyMember_content_all_tips_bottom_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #4B4B4B;
          }

          .selectFamilyMember_content_all_tips_bottom_texts {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #64A3F8;
          }
        }
      }
      .selectFamilyMember_content_all_scroll {
        width: 662rpx;
        max-height: 920rpx;
        .selectFamilyMember_content_all_list {
          margin: 20rpx 0;
          width: 662rpx;

          .selectFamilyMember_content_all_list_left {
            .selectFamilyMember_content_all_list_left_name {
              .selectFamilyMember_content_all_list_left_name_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #4B4B4B;
              }

              .selectFamilyMember_content_all_list_left_name_label {
                width: 66rpx;
                height: 30rpx;
                background: #FF7950;
                border-radius: 15rpx 15rpx 15rpx 15rpx;

                .selectFamilyMember_content_all_list_left_name_label_text {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 16rpx;
                  color: #FFFFFF;
                }
              }
            }
          }

          .selectFamilyMember_content_all_list_right {
            width: 26rpx;
            height: 26rpx;
            border-radius: 13rpx 13rpx 13rpx 13rpx;
            border: 6rpx solid #FF4206;
          }

          .selectFamilyMember_content_all_list_rightSelect {
            width: 26rpx;
            height: 26rpx;
            border-radius: 13rpx 13rpx 13rpx 13rpx;
            border: 2rpx solid #707070;
          }
        }
      }
    }
  }

  .selectFamilyMember_bottomBtn {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;

    .selectFamilyMember_bottomBtn_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }


  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }
}
</style>
